<template>
    <div class="login">
        <div class="content">
            <div class="left">
                <!-- 图标 -->
                <el-image
                    :src="require('@/assets/宇喜logo.png')"
                    fit="cover"
                    class="left-image">
                </el-image>
                <!-- 头部文字 -->
                <div class="title-txt">
                    <h3>打造企业智能制造公共产业服务平台</h3>
                    <p>欢迎你！</p>
                </div>
                <!-- 表单 -->
                <el-form :model="form" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item prop="name"  class="input"  >
                        <el-input v-model="form.name" placeholder="请输入邮箱">
                            <h3 slot="prefix" class="ip-txt">邮箱</h3>
                        </el-input>
                        
                    </el-form-item>
                     <el-form-item prop="password" class="input">
                        <el-input v-model="form.password" placeholder="请输入您的密码" show-password>
                             <h3 slot="prefix" class="ip-txt">密码</h3>
                        </el-input>
                    </el-form-item>
                     <el-form-item prop="passwords" class="input">
                        <el-input v-model="form.passwords" placeholder="请输入您的密码">
                             <h3 slot="prefix" class="ip-txt">确定密码</h3>
                        </el-input>
                    </el-form-item>
                    <!-- 单选框 -->
                    <el-form-item class="checked">
                        <el-checkbox-group v-model="form.type">
                        <el-checkbox label="" name="type">
                                我已阅读并同意
                                <span class="span">《宇喜科技协议》</span>
                        </el-checkbox>           
                        </el-checkbox-group>
                    </el-form-item>
                    <!-- 按钮 -->               
                    <el-button type="primary" @click="onSubmit" class="btns">注册</el-button>                              
                </el-form>
                <!-- 其他选择方式 -->
                <div class="other-login">
                    <h3 class="other-title">使用第三方注册</h3>
                    <a href="">
                     <el-image
                    style="width: 48px; height: 48px"
                     :src="require('@/assets/微信 拷贝.png')"
                    fit="fit"></el-image>
                    </a>
                    <a href="">
                        <el-image
                    style="width: 48px; height: 48px"
                    :src="require('@/assets/BILIBILI_LOGO 拷贝.png')"
                    fit="fit"></el-image>
                     </a>
                    <a href="">
                        <el-image
                    style="width: 48px; height: 48px"
                     :src="require('@/assets/头条样式 拷贝.png')"
                    fit="fit"></el-image>
                     </a>
                    <a href="">
                        <el-image
                    style="width: 48px; height: 48px"
                     :src="require('@/assets/抖音 拷贝.png')"
                    fit="fit"></el-image>
                     </a>               
                </div>             
            </div>
            <div class="right">
                <el-image
                    :src="require('@/assets/3D_Creator_in_action-to_used_as_is.png')"
                    fit="cover"
                    class="right-image">
                </el-image>         
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data:function() {
    return {
      form:{
        name: '',
        resource: '',
        password:'',
        passwords:'',
        type: []
      },
      flog:true,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      rules: {
        name: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type:'email', message: '邮箱格式错误', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ],
        passwords: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    os(){
      console.log(this.$refs.inp)
    },
    onSubmit(){
      this.$router.push('/shichang')
    }
  }
}
</script>
<style lang="less">
.login{
    width: 100vw;
    height: 100vh;
    background:#7f7f7f;
    // 添加的class类
    .el-input.is-active .el-input__inner, .el-input__inner:focus{
        border-left: 2px solid #DA251D;
    }
    .content{
        max-width: 1100px;
        max-height: 640px;
        text-align: left;
        width: 1100px;
        height: 640px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background: #FFFFFF;
        display: flex;
        flex-direction: row;
        .left{
            width: 500px;
            padding: 0px 40px;
            // 图片部分
            .left-image{
                margin-top: 60px;
                width: 120px;
                height: 61px;
                display: block;
            }
            // 文字部分
            .title-txt{
                margin-bottom: 40px;
                h3{
                    height: 24px;
                    font-size: 24px;
                    font-family: SourceHanSansSC;                 
                    color: #333333;
                    line-height: 24px;
                    margin: 24px 0px 14px;                  
                }               
                p{
                    height: 16px;
                    font-size: 16px;
                    font-family: SourceHanSansSC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 16px;
                }
            }
            // form表单
            .demo-ruleForm{
                .el-form-item{
                    margin-bottom: 10px;
                    height: 56px;
                }
                ::placeholder{
                    font-size: 14px;                 
                    font-family: SourceHanSansSC;
                    font-weight: 400;
                    color: #666666;
                }
               //  input 狂的高度
               .el-input__inner{
                   height: 100%;
                   line-height: 100%;
                   padding: 30px 0px 7px 18px;
                   color: #DA251D;
                   border-radius: 0px;
               }
               .el-input__prefix{
                   left: 18px;
                   top: 10px;
               }
               .input{
                   .ip-txt{
                        height: 14px;
                        font-size: 14px;
                        font-family: SourceHanSansSC;
                        font-weight: 400;
                        color: #999999;
                        line-height: 14px;
                   }
               }
            // 单选框
            .checked{
                padding: 10px 0px 32px;
                margin-bottom: 0px;
                .el-form-item__content{
                    height: 16px;
                    line-height: 16px;                
                }
                .span{
                    color: #DA251D;
                }
            }
            //    按钮
            .btns{
                width: 144px;
                height: 48px;
                background: #DA251D;
                border-color: #DA251D;
                font-size: 18px;
                font-family: SourceHanSansSC;
                font-weight: 400;
                color: #FFFFFF;        
            }
          }
        //   其他登录部分
         .other-login{         
            .other-title{
                height: 16px;
                font-size: 16px;
                font-family: SourceHanSansSC;
                font-weight: 400;
                color: #666666;
                line-height: 16px;
                margin: 10px 0px 10px;
            }
            .el-image{
                margin-right: 10px;
            }
            img{
                border-radius: 50%;      
            }
         }
        }
        .right{
            .right-image{
                width: 600px;
                height: 640px;            
                display: block;
            }         
        }
    }
}
</style>
